<script lang="ts" setup>
import { provide, ref, onMounted } from 'vue';

interface FormProps {
    direction?: string;
    labelWidth?: string;
}

const props = withDefaults(defineProps<FormProps>(), {
    direction: 'horizontal',
    labelWidth: '120px'
})
const formRef = ref()

provide('direction', props.direction)

onMounted(() => {
    if (formRef.value && props.direction === 'horizontal') {
        let maxWidth = 0
        const labels = formRef.value.querySelectorAll('.label')
        for (let i = 0; i < labels.length; i++) {
            const element = labels[i];
            maxWidth = Math.max(maxWidth, element.getBoundingClientRect().width)
        }
        for (let i = 0; i < labels.length; i++) {
            const element = labels[i];
            element.style.width = maxWidth + 'px'
        }
    }
})
</script>

<template>
    <div class="umrp-form" ref="formRef">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;

    ::v-deep(.umrp-form-item .label) {
        width: var(--label-width);
    }
}
</style>